<template>
  <z-form-item
    v-if="isShow"
    :label-col="{ style: { width: '120px', paddingRight: '6px' } }"
    :required="formForm?.required === '1'"
    :label="
      formForm?.headText && formForm.personal == '1'
        ? formForm?.headText
        : basicForm?.titleName || '输入框'
    "
    class="z-form-item"
    :prop="basicForm.field"
  >
    <z-input
      v-model:value="model[basicForm.field]"
      :value="formForm.value"
      :maxlength="formForm.max && formForm.max > 0 ? formForm.max : null"
      :disabled="formForm?.disabled === '1'"
      :placeholder="formForm?.placeHolder"
    />
  </z-form-item>
</template>
<script>
import { defineComponent, toRef, computed, watch, ref } from 'vue'
import { useStore } from 'vuex'
import IsShowMixin from '../mixins/isShow.js'

export default defineComponent({
  name: 'InputItem',
  props: {
    formProperty: {
      type: Object,
      default: undefined
    },
    basicProperty: {
      type: Object,
      default: undefined
    },
    formModel: {
      type: Object,
      default: undefined
    }
  },
  setup(props) {
    const store = useStore()

    const basicForm = toRef(props, 'basicProperty')
    const formForm = toRef(props, 'formProperty')
    const model = computed(() => (props.formModel ? props.formModel : {}))

    // // 初始化  组件  显隐
    let isShowmix = new IsShowMixin(basicForm, store, model)
    let isShow = ref(isShowmix.isShow)

    // 监听当前选择组件对象  赋值操作 显隐操作
    watch(() => store.getters.currentVal, () => isShowmix.watch((val) => {
      isShow.value = val
    }))

    return {
      basicForm,
      model,
      isShow,
      formForm
    }
  }
})
</script>
<style lang="less" scoped>
.z-form-item{
  flex: 1;
}
</style>
